:root {
        --brand: #1f4fa6;
        --brand-deep: #163a7a;
        --brand-foreground: #ffffff;
        --accent-green: #2f9e57;
        --accent-green-foreground: #ffffff;
        --case-badge: #4338ca;
        --bg: #fbfdff;
        --fg: #0f172a;
        --muted: #64748b;
        --card: #ffffff;
        --border: #e2e8f0;
        --radius: 0.5rem;
      }

      * { box-sizing: border-box; }
      html, body { margin: 0; padding: 0; }

      body {
        font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        background: var(--bg);
        color: var(--fg);
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
      }

      img { max-width: 100%; display: block; }
      a { color: inherit; }

      .container {
        max-width: 1380px;
        margin: 0 auto;
        padding: 0 2rem;
      }

      .muted { color: var(--muted); }
      .max-w { max-width: 800px; }

      /* Nav */
      .site-nav {
        position: fixed;
        top: 0; left: 0; right: 0;
        z-index: 100;
        background: var(--card);
        border-bottom: 1px solid var(--border);
        padding: 0 1.5rem;
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .nav-logo { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; }
      .nav-logo-text { font-size: 1.3rem; font-weight: 800; color: var(--brand); letter-spacing: -0.02em; }
      .nav-links { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
      .nav-links a { font-size: 0.875rem; color: var(--muted); text-decoration: none; font-weight: 500; transition: color 0.15s; }
      .nav-links a:hover { color: var(--brand); }
      @media (max-width: 600px) { .nav-links { display: none; } }

      /* Hero - Enhanced with more padding */
      .hero {
        margin-top: 64px;
        background: var(--card);
        border-bottom: 1px solid var(--border);
        padding: 120px 0 100px 0;
      }
      .hero-grid {
        display: grid;
        gap: 4rem;
        padding: 0 1.5rem;
        align-items: center;
      }
      @media (min-width: 768px) {
        .hero-grid {
          grid-template-columns: 1.1fr 1fr;
          gap: 5rem;
        }
      }

      .badge {
        display: inline-block;
        background: var(--case-badge);
        color: #fff;
        padding: 0.5rem 1rem;
        border-radius: 4px;
        font-size: 0.8rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
      }

      .hero h1 {
        margin: 1.5rem 0 0;
        color: var(--brand-deep);
        font-size: 2.8rem;
        line-height: 1.25;
        font-weight: 700;
        max-width: 900px;
      }
      @media (min-width: 768px) {
        .hero h1 {
          font-size: 3.2rem;
        }
      }

      .lead {
        margin-top: 1.5rem;
        color: var(--muted);
        font-size: 1.25rem;
        max-width: 700px;
        line-height: 1.7;
      }

      .cta-row {
        margin-top: 2.5rem;
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
      }

      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.875rem 2rem;
        border-radius: var(--radius);
        font-size: 1rem;
        font-weight: 600;
        text-decoration: none;
        transition: background 0.2s, color 0.2s, transform 0.15s;
      }
      .btn:hover {
        transform: translateY(-2px);
      }
      .btn-primary {
        background: var(--brand);
        color: var(--brand-foreground);
      }
      .btn-primary:hover {
        background: var(--brand-deep);
      }
      .btn-outline {
        background: var(--bg);
        color: var(--fg);
        border: 1px solid var(--border);
      }
      .btn-outline:hover {
        background: #f1f5f9;
      }

      /* Hero image */
      .hero-img-wrap { position: relative; }
      .hero-img-wrap img {
        width: 100%;
        height: 420px;
        object-fit: cover;
        border-radius: var(--radius);
        box-shadow: 0 10px 30px rgba(15,23,42,0.15);
      }
      .image-tag {
        position: absolute;
        bottom: -1rem;
        left: -1rem;
        background: var(--accent-green);
        color: #fff;
        padding: 0.6rem 1.25rem;
        border-radius: 6px;
        font-size: 0.9rem;
        font-weight: 600;
        box-shadow: 0 6px 14px rgba(0,0,0,0.15);
        display: none;
      }
      @media (min-width: 768px) {
        .image-tag { display: block; }
      }

      /* Sections - More spacing */
      .section {
        padding: 6rem 0;
      }
      .section-alt {
        background: var(--card);
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        padding: 6rem 0;
      }

      h2 {
        color: var(--brand-deep);
        font-size: 2.4rem;
        margin: 0 0 1rem;
        line-height: 1.2;
      }
      h3 {
        color: var(--brand-deep);
        font-size: 1.25rem;
        margin: 0 0 0.5rem;
      }

      /* Intro grid */
      .intro-grid {
        display: grid;
        gap: 4rem;
        align-items: center;
        margin-top: 2rem;
      }
      @media (min-width: 768px) {
        .intro-grid {
          grid-template-columns: 1fr 1fr;
          gap: 5rem;
        }
      }

      .section-photo {
        width: 100%;
        height: 320px;
        object-fit: cover;
        border-radius: var(--radius);
        box-shadow: 0 6px 20px rgba(15,23,42,0.12);
        border: 1px solid var(--border);
      }
      .photo-caption {
        font-size: 0.8rem;
        color: var(--muted);
        margin-top: 0.6rem;
        text-align: center;
        font-style: italic;
      }

      /* Steps */
      .steps {
        display: grid;
        gap: 2rem;
        margin-top: 2.5rem;
      }
      @media (min-width: 768px) {
        .steps {
          grid-template-columns: repeat(2, 1fr);
          gap: 2.5rem;
        }
      }

      .step-card {
        background: var(--card);
        border: 1px solid var(--border);
        padding: 2rem;
        border-radius: var(--radius);
        box-shadow: 0 1px 2px rgba(15,23,42,0.04);
        transition: box-shadow 0.2s;
        display: flex;
        gap: 1.25rem;
        align-items: flex-start;
      }
      .step-card:hover {
        box-shadow: 0 4px 12px rgba(15,23,42,0.08);
      }
      .step-num {
        flex-shrink: 0;
        width: 3rem;
        height: 3rem;
        border-radius: 999px;
        background: var(--brand);
        color: var(--brand-foreground);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 1.1rem;
      }
      .step-card-body h3 {
        margin-top: 0;
        font-size: 1.2rem;
      }
      .step-card p {
        color: var(--muted);
        font-size: 1rem;
        margin: 0.5rem 0 0;
        line-height: 1.7;
      }

      .callout {
        margin-top: 2.5rem;
        padding: 1.25rem 1.5rem;
        background: #f1f5f9;
        border-left: 5px solid var(--accent-green);
        border-radius: 4px;
        font-weight: 500;
        font-size: 1.05rem;
        color: var(--fg);
        line-height: 1.7;
      }

      /* Photo row */
      .photo-row {
        display: grid;
        gap: 1.5rem;
        margin-top: 3rem;
        grid-template-columns: repeat(2, 1fr);
      }
      @media (min-width: 768px) {
        .photo-row {
          grid-template-columns: repeat(3, 1fr);
          gap: 2rem;
        }
      }

      .photo-card {
        border-radius: var(--radius);
        overflow: hidden;
        border: 1px solid var(--border);
        box-shadow: 0 2px 8px rgba(15,23,42,0.07);
      }
      .photo-card img {
        width: 100%;
        height: 220px;
        object-fit: cover;
        display: block;
        transition: transform 0.35s ease;
      }
      .photo-card:hover img {
        transform: scale(1.05);
      }
      .photo-card-label {
        padding: 0.8rem 1rem;
        font-size: 0.85rem;
        color: var(--muted);
        background: var(--card);
        border-top: 1px solid var(--border);
        text-align: center;
        font-weight: 500;
      }

      /* Product / Solution */
      .product-grid {
        display: grid;
        gap: 4rem;
        padding: 0;
        align-items: start;
      }
      @media (min-width: 768px) {
        .product-grid {
          grid-template-columns: 1fr 1fr;
          gap: 5rem;
        }
      }

      .product-highlight {
        background: linear-gradient(135deg, #eef3fb 0%, #dce8f7 100%);
        border: 1px solid #c3d5ef;
        border-radius: var(--radius);
        padding: 2.5rem;
      }
      .product-name {
        font-size: 1.8rem;
        font-weight: 800;
        color: var(--brand);
        margin: 0 0 0.5rem;
      }
      .product-sub {
        font-size: 0.95rem;
        color: var(--muted);
        margin: 0 0 1.25rem;
      }

      .features {
        list-style: none;
        padding: 0;
        margin: 1.5rem 0 0;
      }
      .features li {
        position: relative;
        padding-left: 1.5rem;
        margin-bottom: 0.85rem;
        color: var(--muted);
        font-size: 0.95rem;
        line-height: 1.6;
      }
      .features li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.65rem;
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: var(--accent-green);
      }

      /* Solution image */
      .solution-img {
        width: 100%;
        height: 260px;
        object-fit: cover;
        border-radius: var(--radius);
        border: 1px solid var(--border);
        box-shadow: 0 4px 14px rgba(15,23,42,0.09);
        margin-top: 1.5rem;
      }

      /* Reco */
      .reco-grid {
        display: grid;
        gap: 3rem;
        align-items: start;
      }
      @media (min-width: 768px) {
        .reco-grid {
          grid-template-columns: 1fr 1fr;
          gap: 4rem;
        }
      }

      .reco-list {
        list-style: none;
        padding: 0;
        margin: 1.5rem 0 0;
      }
      .reco-list li {
        display: flex;
        align-items: flex-start;
        gap: 0.85rem;
        padding: 1rem 0;
        border-bottom: 1px solid var(--border);
        color: var(--muted);
        font-size: 1rem;
        line-height: 1.6;
      }
      .reco-list li:last-child {
        border-bottom: none;
      }
      .reco-icon {
        flex-shrink: 0;
        width: 1.75rem;
        height: 1.75rem;
        background: var(--brand);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 0.8rem;
        font-weight: 700;
        margin-top: 0.1rem;
      }

      /* Results - Enhanced with more padding and spacing */
      #resultats {
        padding: 7rem 0;
        background: var(--bg);
      }

      #resultats h2 {
        font-size: 2.8rem;
        margin-bottom: 0.5rem;
      }

      #resultats .max-w {
        font-size: 1.15rem;
        line-height: 1.7;
      }

      .results {
        display: grid;
        gap: 2rem;
        margin-top: 3rem;
        grid-template-columns: 1fr;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
      }
      @media (min-width: 640px) {
        .results {
          grid-template-columns: repeat(2, 1fr);
          gap: 2.5rem;
        }
      }

      .result-card {
        background: var(--card);
        border: 1px solid var(--border);
        padding: 2rem 2rem 2.5rem 2rem;
        border-radius: var(--radius);
        box-shadow: 0 2px 8px rgba(15,23,42,0.06);
        display: flex;
        gap: 1.25rem;
        align-items: flex-start;
        transition: box-shadow 0.2s, transform 0.2s;
      }
      .result-card:hover {
        box-shadow: 0 8px 24px rgba(15,23,42,0.1);
        transform: translateY(-4px);
      }
      .result-icon {
        flex-shrink: 0;
        width: 3.5rem;
        height: 3.5rem;
        background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 1.5rem;
      }
      .result-card p {
        color: var(--fg);
        font-size: 1.05rem;
        margin: 0;
        line-height: 1.7;
        flex: 1;
      }

      /* Results photo banner */
      .results-banner {
        width: 100%;
        height: 240px;
        object-fit: cover;
        border-radius: var(--radius);
        margin-top: 3rem;
        box-shadow: 0 6px 20px rgba(15,23,42,0.12);
      }

      /* Footer */
      .site-footer {
        background: var(--brand-deep);
        color: #fff;
        padding: 3rem 1.5rem;
        margin-top: 0;
      }
      .footer-inner {
        max-width: 1100px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        justify-content: space-between;
        align-items: center;
      }
      .footer-brand {
        font-size: 1.5rem;
        font-weight: 800;
        letter-spacing: -0.01em;
      }
      .footer-contact {
        font-size: 0.9rem;
        opacity: 0.85;
        line-height: 1.8;
        text-align: right;
      }
      @media (max-width: 600px) {
        .footer-contact { text-align: left; }
      }
      .copyright {
        border-top: 1px solid rgba(255,255,255,0.15);
        margin-top: 1.5rem;
        padding-top: 1.25rem;
        text-align: center;
        font-size: 0.8rem;
        opacity: 0.6;
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
      }

      /* Responsive tweaks */
      @media (max-width: 768px) {
        .hero {
          padding: 80px 0 60px 0;
        }
        .hero h1 {
          font-size: 2rem;
        }
        .lead {
          font-size: 1.05rem;
        }
        .section {
          padding: 4rem 0;
        }
        .section-alt {
          padding: 4rem 0;
        }
        #resultats {
          padding: 5rem 0;
        }
        #resultats h2 {
          font-size: 2rem;
        }
        .result-card {
          padding: 1.5rem;
        }
        .result-card p {
          font-size: 0.95rem;
        }
        .container {
          padding: 0 1.25rem;
        }
        .hero-img-wrap img {
          height: 280px;
        }
        .section-photo {
          height: 240px;
        }
        .photo-card img {
          height: 160px;
        }
        .product-highlight {
          padding: 1.75rem;
        }
        .product-name {
          font-size: 1.5rem;
        }
      }

      @media (max-width: 480px) {
        .hero {
          padding: 60px 0 40px 0;
        }
        .hero h1 {
          font-size: 1.6rem;
        }
        .lead {
          font-size: 0.95rem;
        }
        .btn {
          padding: 0.75rem 1.5rem;
          font-size: 0.9rem;
        }
        .results {
          grid-template-columns: 1fr;
        }
        .result-card {
          padding: 1.25rem;
        }
      }
/* ================================================================
   FULL RESPONSIVE PACK — Phone / Tablet / Laptop / Large Desktop
   ================================================================ */

/* ---- Large Desktop (1440px+) ---- */
@media (min-width: 1440px) {
  .container { max-width: 1440px; }
  .hero { padding: 140px 0 120px; }
  .hero-img-wrap img { height: 480px; }
  .steps { gap: 3rem; }
  .results { gap: 3rem; }
}

/* ---- Ultra-wide Desktop (1920px+) ---- */
@media (min-width: 1920px) {
  .container { max-width: 1680px; }
  .hero h1 { font-size: 3.6rem; }
  .hero-img-wrap img { height: 540px; }
}

/* ---- Tablet (768px – 1023px) ---- */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-grid { grid-template-columns: 1fr; gap: 3rem; }
  .hero h1 { font-size: 2.4rem; }
  .intro-grid { grid-template-columns: 1fr; gap: 3rem; }
  .product-grid { grid-template-columns: 1fr; gap: 3rem; }
  .reco-grid { grid-template-columns: 1fr; gap: 3rem; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .photo-row { grid-template-columns: repeat(2, 1fr); }
  .results { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Large Phone / Small Tablet (481px – 767px) ---- */
@media (max-width: 767px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .intro-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .product-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .reco-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .steps { grid-template-columns: 1fr; gap: 1.5rem; }
  .step-card { padding: 1.5rem; gap: 1rem; }
  .photo-row { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .results { grid-template-columns: 1fr; gap: 1.5rem; }
  .result-card { padding: 1.5rem; }
  h2 { font-size: 1.9rem; }
  #resultats h2 { font-size: 2rem; }
  .badge { padding: 0.4rem 0.8rem; font-size: 0.7rem; }
  .cta-row { gap: 0.75rem; }
  .btn { width: 100%; }
}

/* ---- Small Phone (max 480px) ---- */
@media (max-width: 480px) {
  .nav-logo-text { font-size: 1.1rem; }
  .hero { padding: 56px 0 36px; }
  .hero h1 { font-size: 1.6rem; }
  .lead { font-size: 0.95rem; }
  .hero-img-wrap img { height: 220px; }
  .photo-row { grid-template-columns: 1fr; }
  .product-highlight { padding: 1.5rem; }
  .site-footer { padding: 2rem 1.25rem; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .footer-contact { text-align: left; }
}